<script setup lang="ts">
import { onMounted } from 'vue'
import {
    Document,
    Menu as IconMenu,
    Setting,
    HomeFilled,
    Search,
    InfoFilled
} from '@element-plus/icons-vue'
const handleOpen = (key: string, keyPath: string[]) => {
    // console.log('handleOpen', key, keyPath)
}

import { useRouter } from 'vue-router'
const router = useRouter()
import { useHosMsgStore } from '@/stores/hospitalMsg'
import { ro } from 'element-plus/es/locales.mjs';
const HosMsgStore = useHosMsgStore()
onMounted(() => {
    HosMsgStore.getDepartmentMsg(router.currentRoute.value.query?.hoscode as string)
    HosMsgStore.gethospitalMsg(router.currentRoute.value.query?.hoscode as string)
})
const activeIndex = (path: string) => {
    router.push({
        path: path,
        query: { hoscode: router.currentRoute.value.query.hoscode }
    })
}
</script>

<template>
    <div class="msg-container">
        <div class="left">
            <h5>
                <el-icon>
                    <HomeFilled />
                </el-icon>
                / 医院信息
            </h5>
            <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" router>
                <el-menu-item index="/hospital/register" @click="activeIndex('/hospital/register')">
                    <el-icon><icon-menu /></el-icon>
                    <span>预约挂号</span>
                </el-menu-item>
                <el-menu-item index="/hospital/detail" @click="activeIndex('/hospital/detail')">
                    <el-icon>
                        <document />
                    </el-icon>
                    <span>医院详情</span>
                </el-menu-item>
                <el-menu-item index="/hospital/notice" @click="activeIndex('/hospital/notice')">
                    <el-icon>
                        <setting />
                    </el-icon>
                    <span>预约通知</span>
                </el-menu-item>
                <el-menu-item index="/hospital/close" @click="activeIndex('/hospital/close')">
                    <el-icon>
                        <InfoFilled />
                    </el-icon>
                    <span>停诊信息</span>
                </el-menu-item>
                <el-menu-item index="/hospital/search" @click="activeIndex('/hospital/search')">
                    <el-icon>
                        <Search />
                    </el-icon>
                    <span>查询/取消</span>
                </el-menu-item>
            </el-menu>
        </div>
        <div class="content">
            <router-view></router-view>
        </div>
    </div>

</template>

<style scoped>
.msg-container {
    width: 1200px;
    margin: auto;
    display: flex;
    min-height: 600px;

    .left {

        h5,
        .el-menu {
            width: 140px;
        }

        h5 {
            text-align: center;
            font-size: 18px;
            margin-top: 10px;
        }
    }

    .content {
        flex: 1;
        margin-left: 30px;
    }
}
</style>